<!-- ！！！增加了对教室楼栋的选择，增加了对设备数量的选择
该界面是管理员进行基本信息管理，包括对所有教室的设备、容量、使用须知的增删改查
我们以北京科技大学的教学楼模拟该系统，即该楼有五层，每层有五个教室。假设教室的属性一样。 -->
<!-- 本页面是管理员登录后的首页 
后端人员需要注意的是，如果您发现表格没有包括所有条目，请检查该文件末尾 js函数中 table.init函数中，limit是否修改，默认最大条数是10条。-->
<!DOCTYPE html>
<html>

<head>
    {% load static %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>管理员基本信息管理</title>
    <link rel="stylesheet" href="{% static 'layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static 'css/admin_basicInfo.css' %}">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">智慧教室管理系统</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                         class="layui-nav-img">
                    <span id="username">{{ name }}</span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="/user_center/">个人中心</a></dd>
                    <dd><a href="/logout/">退出登录</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="/admin_userManagement/">用户管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="student/">学生</a></dd>
                        <dd><a href="teacher/">教师</a></dd>
                        {% if state == 4 %}
                            <dd><a href="college_admin/">院级管理员</a></dd>
                        {% endif %}
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="/classroom-basic-info/">教室基本信息管理</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/admin_useInfo_new/">教室使用信息管理</a>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="/course-schedule/">教室排课管理</a>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="/adminreserve/">教室预约管理
                        <span class="layui-badge-dot"></span></a>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">

        <div class="basicInfoHeader">
            <p>教室基本信息管理</p>
        </div>
        <!-- selectBox中放的是选择层数、教室、提交、重置的盒子 -->
        <blockquote class="selectBox">
            <!-- 用一个表单，提交选择的楼层和教室 -->
            <div class="layui-form">
                <!-- 选择楼栋 -->
                <label class="layui-form-label">请选择楼栋</label>
                <div class="building layui-input-block">
                    <select name="building" lay-verify="required" lay-filter="building_list" id="building_list">
                    </select>
                </div>
                <!-- 选择楼层 -->
                <label class="layui-form-label">请选择楼层</label>
                <div class="layui-input-block floor">
                    <select name="floor" lay-verify="required" lay-filter="floor_list" id="floor_list">
                    </select>
                </div>
                <!-- 选择教室 -->
                <label class="layui-form-label">请选择教室</label>
                <div class="layui-input-block room">
                    <select name="room" lay-verify="required" id="room_list">
                    </select>
                </div>
                <div class="layui-input-block submitReset">
                    <button class="layui-btn" lay-filter="formDemo" id="search_classroom">查询教室</button>
                    <button type="button" class="layui-btn layui-btn-primary" onclick="onAddClassRoomBtn()">增加教室
                    </button>
                </div>
            </div>
        </blockquote>


        <!-- 显示教室的容量和使用须知 -->
        <blockquote class="capacityNotice">
            <div class="layui-card capacity">
                <div class="layui-card-header">教室容量</div>
                <div class="layui-card-body" id="capacity-tag">
                </div>
            </div>
            <div class="layui-card notice">
                <div class="layui-card-header">教室使用须知</div>
                <div class="layui-card-body" id="notice-tag">
                </div>
            </div>
            <div class="layui-input-block reviseBasicInfo">
                <button type="button" class="layui-btn layui-btn-primary" onclick="onReviseBasicInfoBtn()">修改信息</button>
                <button type="button" class="layui-btn layui-btn-primary" id="delete_classroom">删除该教室</button>

            </div>
        </blockquote>

        <!-- 下面是对于设备的增删改查 -->
        <div class="facility">
            <blockquote class="searchBox">
                <!-- 用一个表单提交需要查询的设备名称 -->
                <div class="layui-form">
                    <label class="layui-form-label">
                        请输入查询内容
                    </label>
                    <input id="search-f_name-in" autocomplete="off" class="layui-input" type="text" value="">
                    <div class="layui-input-block submitAdd">
                        <button class="layui-btn" lay-submit lay-filter="formDemo" id="search_facility_name">查询设备
                        </button>
                        <button type="button" class="layui-btn layui-btn-primary" onclick="onAddBtn()">增加设备</button>
                    </div>
                </div>
            </blockquote>
            <fieldset class="layui-elem-field">
                <div class="facilityTableBox">
                    <table lay-filter="facilityTable" id="f_table"></table>
                </div>
            </fieldset>
        </div>
    </div>

</div>
<!-- 添加教室的表单 -->
<div id="addClassroom_main" style="display: none; ">
    <div class="layui-form " id="add-form ">
        <div class="layui-form-item center ">
            <label class="layui-form-label " style="width: 100px ">教室所属楼栋</label>
            <select name="building" lay-verify="required" id="building_list-in">
            </select>
        </div>
        <div class="layui-form-item center ">
            <label class="layui-form-label " style="width: 100px ">教室门牌号</label>
            <div class="layui-input-block ">
                <input type="text " required value=" " style="width: 240px " lay-verify="required "
                       placeholder="请输入教室门牌号" autocomplete="off " class="layui-input " id="add-classroom_name-in">
            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label " style="width: 100px ">教室容量</label>
            <div class="layui-input-block ">
                <input type="text " required style="width: 240px " lay-verify="required "
                       placeholder="请输入教室容量" autocomplete="off " class="layui-input " id="add-capacity-in">
            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label " style="width: 100px ">教室使用须知</label>
            <div class="layui-input-block ">
                <input type="text " required style="width: 240px " lay-verify="required "
                       placeholder="请输入教室使用须知" autocomplete="off " class="layui-input " id="add-notice-in">
            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label " style="width: 100px ">教室类型</label>
            <div class="layui-input-block ">
                <input type="text " required style="width: 240px " lay-verify="required "
                       placeholder="请输入教室类型" autocomplete="off " class="layui-input " id="add-attribute-in">
            </div>
        </div>
        <div class="layui-form-item ">
            <div class="layui-input-block ">
                <button class="layui-btn " lay-filter="save " id="add_classroom">立即提交</button>
                <button type="reset " class="layui-btn layui-btn-primary " id="closeBtn ">重置</button>
            </div>
        </div>
    </div>
</div>

<!-- 添加设备的表单 -->
<div id="add_main" style="display: none; ">
    <div class="layui-form " id="add-form ">
        <div class="layui-form-item center ">
            <label class="layui-form-label " style="width: 100px ">设备名称</label>
            <div class="layui-input-block ">
                <input type="text " id="add-f_name-in" required value=" " style="width: 240px " lay-verify="required "
                       placeholder="请输入设备名称 " autocomplete="off " class="layui-input ">
            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label " style="width: 100px ">设备类型</label>
            <div class="layui-input-block ">
                <input type="text " id="add-category-in" required style="width: 240px " lay-verify="required "
                       placeholder="请输入设备类型 " autocomplete="off " class="layui-input ">
            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label " style="width: 100px ">设备数量</label>
            <div class="layui-input-block ">
                <input type="text " id="add-f_num-in" required style="width: 240px " lay-verify="required "
                       placeholder="请输入设备数量" autocomplete="off " class="layui-input ">
            </div>
        </div>
        <div class="layui-form-item ">
            <div class="layui-input-block ">
                <button class="layui-btn " lay-submit lay-filter="save " id="add_facility">立即提交</button>
                <button type="reset " class="layui-btn layui-btn-primary " id="closeBtn ">重置</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改设备的表单 -->
<div id="reviseFacility_main" style="display: none; ">
    <div class="layui-form " id="add-form " action="{% url "classroomBasicInfo:update-f" %}">
        <input type="hidden" id="fid-in" name="fid-in">
        <div class="layui-form-item center ">
            <label class="layui-form-label " style="width: 100px ">设备名称</label>
            <div class="layui-input-block ">
                <input type="text " id="edit-f_name-in" required value=" " style="width: 240px " lay-verify="required "
                       placeholder="请输入设备名称 " autocomplete="off " class="layui-input ">
            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label " style="width: 100px ">设备类型</label>
            <div class="layui-input-block ">
                <input type="text " id="edit-category-in" required style="width: 240px " lay-verify="required "
                       placeholder="请输入设备类型 " autocomplete="off " class="layui-input ">
            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label " style="width: 100px ">设备数量</label>
            <div class="layui-input-block ">
                <input type="text " id="edit-f_num-in" required style="width: 240px " lay-verify="required "
                       placeholder="请输入设备数量" autocomplete="off " class="layui-input ">
            </div>
        </div>
        <div class="layui-form-item ">
            <div class="layui-input-block ">
                <button class="layui-btn " lay-submit lay-filter="save " id="edit_facility">立即提交</button>
                <button type="reset " class="layui-btn layui-btn-primary " id="closeBtn ">重置</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改教室基本信息的表单 -->
<div id="reviseBasicInfo_main" style="display: none; ">
    <div class="layui-form " id="add-form ">
        <div class="layui-form-item center ">
            <label class="layui-form-label " style="width: 100px ">教室容量</label>
            <div class="layui-input-block ">
                <input type="text " id="edit-capacity-in" required value=" " style="width: 240px "
                       lay-verify="required "
                       placeholder="请输入教室容量" autocomplete="off " class="layui-input ">
            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label " style="width: 100px ">教室使用须知</label>
            <div class="layui-input-block ">
                <!-- <input type="text " name="type " required style="width: 240px " lay-verify="required " placeholder="请输入教室使用须知 " autocomplete="off " class="layui-input "> -->
                <textarea id="edit-notice-in" id="" cols="30" rows="10"></textarea>
            </div>
        </div>

        <div class="layui-form-item ">
            <div class="layui-input-block ">
                <button class="layui-btn " lay-submit lay-filter="save " id="edit_classroom">立即提交</button>
                <button type="reset " class="layui-btn layui-btn-primary " id="closeBtn ">重置</button>
            </div>
        </div>
    </div>
</div>

<script src="{% static 'jquery/jquery-3.2.1.js' %}"></script>
<script src="{% static 'layer/layer.js' %}"></script>
<script src="{% static 'layui/layui.js' %}"></script>

<!--设备表格按钮-->
<script type="text/html" id="operation">
    <button class="delete" lay-event="del">删除</button>
    <button class="revise" lay-event="edit">修改</button>
</script>

<script>
    //判断当前登录的是谁
    $.ajax({
                url: "/user/",
                method: "get",
                success: function (response) {
                    if(response.msg === 'ok'){
                        $("#username").html(response.data.username)
                    } else {
                        window.location.href = '/login'
                    }
                },
                error: function (err) {
                    window.location.href = '/login'
                }
        })
</script>
<script>
    //楼栋-楼层-教室
    const building_floor_room = {{ building_floor_room|safe }};
    //楼层选择栏
    var building_html = "<option value=''></option>";
    for (const k in building_floor_room) {
        building_html += "<option value='" + k + "'>" + building_floor_room[k]["name"] + "</option>";
    }
    document.getElementById("building_list").innerHTML = building_html;
    document.getElementById("building_list-in").innerHTML = building_html;
    //楼栋id，教室id，名称
    var bid = null, cid = null, cname = null;

    //JS
    layui.use(['element', 'layer', 'util', 'form', 'table'], function () {
        var element = layui.element,
            layer = layui.layer,
            util = layui.util,
            form = layui.form,
            table = layui.table,
            $ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function (othis) {
                layer.msg('展开左侧菜单的操作', {
                    icon: 0
                });
            },
            menuRight: function () {
                layer.open({
                    type: 1,
                    content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                    area: ['260px', '100%'],
                    offset: 'rt' //右上角
                    ,
                    anim: 5,
                    shadeClose: true
                });
            }
        });

        //根据选择楼栋刷新楼层
        form.on("select(building_list)", function () {
            const building = $("#building_list").val();
            var html = "<option value=''></option>";
            if (building in building_floor_room) {
                for (const f in building_floor_room[building]["floor"]) {
                    html += "<option value='" + f + "'>" + f + "楼</option>";
                }
            }
            document.getElementById("floor_list").innerHTML = html;
            document.getElementById("room_list").innerHTML = "";
            form.render("select");
        })

        //根据选择楼层刷新教室
        form.on("select(floor_list)", function () {
            const building = $("#building_list").val();
            const floor = $("#floor_list").val();
            var html = "<option value=''></option>";
            if (building in building_floor_room && floor in building_floor_room[building]["floor"]) {
                const r_list = building_floor_room[building]["floor"][floor];
                for (const r in r_list) {
                    html += "<option value='" + r + "'>" + (floor * 100 + r_list[r]) + "</option>";
                }
            }
            document.getElementById("room_list").innerHTML = html;
            form.render("select");
        })

        //设备表格
        table.render({
            elem: "#f_table",
            loading: false,
            cols: [[
                {
                    field: "id",
                    title: "设备id"
                }, {
                    field: "name",
                    title: "设备名称"
                }, {
                    field: "classroom",
                    title: "所属教室"
                }, {
                    field: "category",
                    title: "设备类型"
                }, {
                    field: "number",
                    title: "设备数量"
                }, {
                    toolbar: "#operation",
                    title: "操作"
                }
            ]]
        })

        //更新表格
        function reload_table(f_name) {
            table.reload("f_table", {
                url: "{% url "classroomBasicInfo:search-f" %}",
                method: "post",
                headers: {"X-CSRFToken": "{{ csrf_token }}"},
                page: false,
                where: {
                    "f_name-in": f_name,
                    "building_id": bid,
                    "classroom_name": cname,
                    "classroom_id": cid
                },
                done: function (res, curr, count) {
                    if (!("flag" in res)) alert("未知错误");
                    else if (res["flag"] !== 0) alert(res["flag"]);
                }
            })
        }

        //查询教室和设备表
        $("#search_classroom").on("click", function () {
            //检错
            const building = $("#building_list").val();
            const floor = $("#floor_list").val();
            const room = $("#room_list").val();
            if (!(building in building_floor_room)
                || !(floor in building_floor_room[building]["floor"])
                || !(room in building_floor_room[building]["floor"][floor])) {
                alert("楼层或教室错误");
                return;
            }
            $.ajax({
                url: "{% url "classroomBasicInfo:search-r" %}",
                type: "post",
                data: {
                    "building": building,
                    "floor": floor,
                    "room": building_floor_room[building]["floor"][floor][room]
                },
                dataType: "json",
                headers: {"X-CSRFToken": "{{ csrf_token }}"},
                success: function (res) {
                    if (!("flag" in res)) {
                        alert("未知错误");
                        return
                    } else if (res["flag"] !== 0) {
                        alert(res["flag"])
                        return;
                    }
                    //教室信息
                    bid = res["building_id"];
                    cid = res["classroom_id"];
                    cname = res["classroom_name"];
                    document.getElementById("capacity-tag").innerHTML = "该教室可容纳" + res["capacity"] + "人";
                    document.getElementById("notice-tag").innerHTML = res["notice"];
                    //刷新表格
                    reload_table();
                },
                error: function () {
                    alert("ajax请求错误");
                }
            })
        })

        //按设备名查找设备
        $("#search_facility_name").on("click", function () {
            if (bid == null || cid == null || cname == null) {
                alert("请先选择教室");
                return;
            }
            reload_table($("#search-f_name-in").val());
        })

        //表格中按钮操作
        table.on("tool(facilityTable)", function (obj) {
            if (obj.event === "edit") {
                $("#fid-in").val(obj.data.id);
                //页面层-自定义
                index = layer.open({
                    type: 1,
                    title: "修改设备信息",
                    area: ['400px', '300px'],
                    shadeClose: true, //点击遮罩关闭
                    content: $("#reviseFacility_main"),
                    success: function (layero, index) {
                    },
                    yes: function () {
                    }
                });
            } else if (obj.event === "del") {
                $.ajax({
                    url: "{% url "classroomBasicInfo:delete-f" %}",
                    type: "post",
                    data: {
                        "fid-in": obj.data.id
                    },
                    dataType: "json",
                    headers: {"X-CSRFToken": "{{ csrf_token }}"},
                    success: function (res) {
                        if (!("flag" in res)) {
                            alert("未知错误");
                            return;
                        } else if (res["flag"] !== 0) {
                            alert(res["flag"]);
                            return;
                        }
                        //更新表格
                        reload_table();
                    },
                    error: function () {
                        alert("ajax请求错误");
                    }
                })
            }
        })

        //修改教室信息
        $("#edit_classroom").on("click", function () {
            if (bid == null || cid == null || cname == null) {
                alert("请先选择教室");
                return;
            }
            $.ajax({
                url: "{% url "classroomBasicInfo:update-r" %}",
                type: "post",
                data: {
                    "building_id": bid,
                    "classroom_id": cid,
                    "capacity-in": $("#edit-capacity-in").val(),
                    "notice-in": $("#edit-notice-in").val()
                },
                dataType: "json",
                headers: {"X-CSRFToken": "{{ csrf_token }}"},
                success: function (res) {
                    if (!("flag" in res)) {
                        alert("未知错误");
                        return;
                    } else if (res["flag"] !== 0) {
                        alert(res["flag"]);
                        return;
                    }
                    //关闭弹窗更新显示
                    layer.close(layer.index);
                    document.getElementById("capacity-tag").innerHTML = "该教室可容纳" + $("#edit-capacity-in").val() + "人";
                    document.getElementById("notice-tag").innerHTML = $("#edit-notice-in").val();
                },
                error: function () {
                    alert("ajax请求错误");
                }
            })
        })

        //修改设备
        $("#edit_facility").on("click", function () {
            $.ajax({
                url: "{% url "classroomBasicInfo:update-f" %}",
                type: "post",
                data: {
                    "fid-in": $("#fid-in").val(),
                    "f_name-in": $("#edit-f_name-in").val(),
                    "category-in": $("#edit-category-in").val(),
                    "f_num-in": $("#edit-f_num-in").val()
                },
                dataType: "json",
                headers: {"X-CSRFToken": "{{ csrf_token }}"},
                success: function (res) {
                    if (!("flag" in res)) {
                        alert("未知错误");
                        return;
                    } else if (res["flag"] !== 0) {
                        alert(res["flag"]);
                        return;
                    }
                    //关闭弹窗更新表格
                    layer.close(layer.index);
                    reload_table();
                },
                error: function () {
                    alert("ajax请求错误");
                }
            })
        })

        //添加设备
        $("#add_facility").on("click", function () {
            if (bid == null || cid == null || cname == null) {
                alert("请先选择教室");
                return;
            }
            $.ajax({
                url: "{% url "classroomBasicInfo:add-f" %}",
                type: "post",
                data: {
                    "building_id": bid,
                    "classroom_id": cid,
                    "f_name-in": $("#add-f_name-in").val(),
                    "category-in": $("#add-category-in").val(),
                    "f_num-in": $("#add-f_num-in").val()
                },
                dataType: "json",
                headers: {"X-CSRFToken": "{{ csrf_token }}"},
                success: function (res) {
                    if (!("flag" in res)) {
                        alert("未知错误");
                        return;
                    } else if (res["flag"] !== 0) {
                        alert(res["flag"]);
                        return;
                    }
                    //关闭弹窗更新表格
                    layer.close(layer.index);
                    reload_table();
                },
                error: function () {
                    alert("ajax请求错误");
                }
            })
        })

        //删除教室
        $("#delete_classroom").on("click", function () {
            if (bid == null || cid == null || cname == null) {
                alert("请先选择教室");
                return;
            }
            $.ajax({
                url: "{% url "classroomBasicInfo:delete-r" %}",
                type: "post",
                data: {
                    "building_id": bid,
                    "classroom_id": cid
                },
                dataType: "json",
                headers: {"X-CSRFToken": "{{ csrf_token }}"},
                success: function (res) {
                    if (!("flag" in res)) {
                        alert("未知错误");
                        return;
                    } else if (res["flag"] !== 0) {
                        alert(res["flag"]);
                        return;
                    }
                    alert("删除成功");
                    window.location.reload();  //刷新页面
                },
                error: function () {
                    alert("ajax请求错误");
                }
            })
        })

        //添加教室
        $("#add_classroom").on("click", function () {
            //检错
            const building = $("#building_list-in").val();
            const classroom_name = parseInt($("#add-classroom_name-in").val());
            if (typeof (classroom_name) !== "number" || classroom_name < 100) {
                alert("教室门牌号错误");
                return;
            }
            //判断教室是否已存在
            const floor = Math.floor(classroom_name / 100);
            const room = classroom_name % 100;
            console.log(floor, room);
            if (floor in building_floor_room[building]["floor"]
                && building_floor_room[building]["floor"][floor].includes(room)) {
                alert("教室已存在");
                return;
            }
            $.ajax({
                url: "{% url "classroomBasicInfo:add-r" %}",
                type: "post",
                data: {
                    "building_id": building,
                    "classroom_name": classroom_name,
                    "capacity": $("#add-capacity-in").val(),
                    "notice": $("#add-notice-in").val(),
                    "attribute": $("#add-attribute-in").val()
                },
                dataType: "json",
                headers: {"X-CSRFToken": "{{ csrf_token }}"},
                success: function (res) {
                    if (!("flag" in res)) {
                        alert("未知错误");
                        return;
                    } else if (res["flag"] !== 0) {
                        alert(res["flag"]);
                        return;
                    }
                    alert("添加成功");
                    window.location.reload();  //刷新页面
                },
                error: function () {
                    alert("ajax请求错误");
                }
            })
        })
    });

    function onAddBtn() {
        //页面层-自定义
        //页面层-自定义
        layer.open({
            type: 1,
            title: "新增设备",
            area: ['400px', '300px'],
            shadeClose: true, //点击遮罩关闭
            content: $("#add_main"),
            success: function (layero, index) {
            },
            yes: function () {
            }
        });
    }

    function onAddClassRoomBtn() {
        layer.open({
            type: 1,
            title: "新增教室",
            area: ['400px', '300px'],
            shadeClose: true, //点击遮罩关闭
            content: $("#addClassroom_main"),
            success: function (layero, index) {
            },
            yes: function () {
            }
        });
    }

    function onReviseBasicInfoBtn() {
        //页面层-自定义
        //页面层-自定义
        layer.open({
            type: 1,
            title: "修改教室容量和使用须知",
            area: ['400px', '400px'],
            shadeClose: true, //点击遮罩关闭
            content: $("#reviseBasicInfo_main"),
            success: function (layero, index) {
            },
            yes: function () {
            }
        });
    }
</script>
</body>

</html>